<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>顾客管理</title>
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="/three/static/h-ui.admin/css/style.css" />
<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript"
	src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript"
	src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript"
	src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/three/static/formEdit.js"></script>
</head>
<body>
	<form method="post" action="/three/custom/list" id="form1"
		enctype="multipart/form-data" name="form1">
		<!-- 添加模态框 -->
		<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content radius">
					<div class="modal-header">
						<h3 class="modal-title">顾客信息更新</h3>
						<a class="close" data-dismiss="modal" aria-hidden="true"
							href="javascript:void();">x</a>
					</div>
					<div class="modal-body">
						<input type="hidden" name="customUserId" id="customUserId" class="input-text">
						<table
							class="table table-border table-bordered table-bg table-hover  table-responsive">

							<tr>
								<td>手机:</td>
								<td><input type="text" class="input-text radius size-L"
									name="mobile" value=""></td>
								<td>头像:</td>
								<td><span class="btn-upload form-group"> <input
										class="input-text upload-url radius" type="text"
										style="width: 120px" readonly><a
										href="javascript:void(0);" class="btn btn-primary radius"><i
											class="Hui-iconfont">&#xe642;</i> 上传</a> <input type="file"
										class="input-file" name="file">
								</span></td>
							</tr>
							<tr>
								<td>姓名:</td>
								<td><input type="text" class="input-text radius size-L"
									name="username" value="">
								<td>性别:</td>
								<td><span class="select-box"> <select class="select"
										size="1" name="sex">
											<option value="0">男</option>
											<option value="1">女</option>
											<option value="2">保密</option>
									</select>
								</span></td>
							</tr>
							<tr>
								<td>昵称:</td>
								<td><input type="text" class="input-text radius size-L"
									name="nikename" value=""></td>
								<td>出生日期:</td>
								<td><input type="date" class="input-text radius size-L"
									name="bornDate" value=""></td>
							</tr>
							<tr>
								<td>电话:</td>
								<td><input type="text" class="input-text radius size-L"
									name="phone" value=""></td>
								<td>QQ:</td>
								<td><input type="text" class="input-text radius size-L"
									name="qq" value=""></td>
							</tr>
							<tr>
								<td>邮箱:</td>
								<td><input type="text" class="input-text radius size-L"
									name="email" value=""></td>
								<td>通信地址:</td>
								<td><input type="text" class="input-text radius size-L"
									name="address" value=""></td>
							</tr>
							<tr>
								<td>备注:</td>
								<td colspan="3">
									<div class="formControls col-xs-8 col-sm-12">
										<textarea class="textarea" name="remark"></textarea>
									</div>
								</td>
							</tr>
						</table>

					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" id="btn_save" type="button">确定</button>
						<button class="btn btn-warning" data-dismiss="modal"
							aria-hidden="true">关闭</button>
					</div>
				</div>
			</div>
		</div>

		<div class="pd-20">
			<div class="text-c">
				<table class="table">
					<tr>
						<td>手机号:<input type="text" name="qmobile" id="qmobile"
							class="input-text" style="width: 200px"></td>
						<td>姓名 :<input type="text" name="qusername" id="qusername"
							class="input-text" style="width: 200px"></td>
						<td>店铺名称:<select name="qshopid" id="qshopid"
							class="input-text" style="width: 200px">
								<option value=""></option>
								<c:forEach items="${shopList }" var="shop">
									<option value="${shop.shopId }">${shop.shopName }</option>
								</c:forEach>
						</select></td>
						<td>注册方式:<select name="qenrollmode" id="qenrollmode"
							class="input-text" style="width: 200px">
								<option value=""></option>
								<option value="1">微信</option>
								<option value="2">商家</option>
								<option value="3">后台</option>
						</select></td>
					</tr>
					<tr>
						<td>会员号：<input type="text" name="qcustomuserid"
							id="qcustomuserid" class="input-text" style="width: 200px"></td>
						<td>昵 称: <input type="text" name="qnikename" id="qnikename"
							class="input-text" style="width: 200px"></td>
						<td>微信状态:<select name="qwechatstatus" id="qwechatstatus"
							class="input-text" style="width: 200px">
								<option value=""></option>
								<option value="1">未订阅</option>
								<option value="2">已订阅</option>
								<option value="3">已退订</option>
						</select>
						</td>
						<td colspan="2" align="left"><button type="submit"
								class="btn btn-primary">
								<i class="Hui-iconfont">&#xe665;</i>搜用户
							</button>
							<button type="button" class="btn btn-primary" id="resetBtn">
								<i class="Hui-iconfont">&#xe68f;</i>重置
							</button></td>
					</tr>
				</table>
			</div>
			<div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l"> <a class="btn btn-primary radius"
					onclick="modal1show()" href="javascript:;"><i
						class="Hui-iconfont">&#xe600;</i>添加用户</a></span>&nbsp; <a
					class="btn btn-primary radius" href="javascript:;" id="ckxq"><i
					class="Hui-iconfont">&#xe665;</i>查看详情</a><br>
			</div>
			<table
				class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th>选择</th>
						<th>头像</th>
						<th>会员号</th>
						<th>手机</th>
						<th>姓名</th>
						<th>昵称</th>
						<th>性别</th>
						<th>店铺名称</th>
						<th>微信状态</th>
						<th>QQ</th>
						<th>邮箱</th>
						<th>出生日期</th>
						<th>最近到店时间</th>
						<th>注册方式</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${customList }" var="list">
						<tr class="text-c">
							<td><input type="radio" name="rb"
								value="${list.custom_user_id }" /></td>
							<td><img width="80" height="60" alt=""
								src="http://localhost:8080/three/${list.photo }"></td>
							<td>${list.custom_user_id }</td>
							<td>${list.mobile }</td>
							<td>${list.username }</td>
							<td>${list.nikename }</td>
							<td class="text-c"><c:if test="${list.sex=='0'  }">男</c:if>
								<c:if test="${list.sex=='1'  }">女</c:if> <c:if
									test="${list.sex=='2'  }">保密</c:if></td>
							<td>${list.shop_name}</td>
							<td class="user-status"><c:if
									test="${list.wechat_status=='1'  }">未订阅</c:if> <c:if
									test="${list.wechat_status=='2'  }">已订阅</c:if> <c:if
									test="${list.wechat_status=='3'  }">已退订</c:if></td>
							<td class="f-14 user-manage">${list.qq }</td>
							<td>${list.email }</td>
							<td><f:formatDate value="${list.born_date }"
									pattern="yyyy-MM-dd" /></td>
							<td><f:formatDate value="${list.recent_time}"
									pattern="yyyy-MM-dd hh:mm:ss" /></td>
							<td><c:if test="${list.enroll_mode=='1'  }">微信</c:if> <c:if
									test="${list.enroll_mode=='2'  }">商家</c:if> <c:if
									test="${list.enroll_mode=='3'  }">后台</c:if></td>
							<td><a title="编辑" href="javascript:;"
								onclick="toupd('${list.custom_user_id}')" class="ml-5"
								style="text-decoration: none"> <i class="Hui-iconfont">&#xe647;</i>修改
							</a> <a title="删除"
								href="/three/custom/delete?customUserId=${list.custom_user_id }"
								class="ml-5" style="text-decoration: none"> <i
									class="Hui-iconfont">&#xe6e2;</i>删除
							</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</form>

<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog" style="width:1000px">
		<div class="modal-content radius" >
			<div class="modal-header" >
				<h3 class="modal-title">查看顾客详细信息</h3>
				<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
			</div>    
			<div class="modal-body">
							<a href="javascript:void(0)" id="aaa">基本信息</a>&nbsp;
							<a href="javascript:void(0)" id="bbb">消费情况</a>&nbsp;
				<br>
				<iframe src="" id="iframe"
						style="height: 380px; width: 900px; border: none;scrolling:yes"></iframe>				
			</div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	//分页
	$('.table-sort').dataTable({
		"aaSorting" : [ [ 1, "desc" ] ],//默认第几个排序
		"bStateSave" : true,//状态保存
		/* "aoColumnDefs" : [ {
			"orderable" : false,
			"aTargets" : [ 0, 7 ]
		} // 制定列不参与排序
		] */
	});
	//模态框显示
	function modal1show() {
		$(".input-text").val("");
		$(".textarea").val("");
		$("select[name=sex]").checked;
		$("#modal-demo").modal("show");
	}
	//重置
	$("#resetBtn").on("click", function() {
		$(".input-text").val("");
	})
	//添加
	$("#btn_save").click(function() {			
		if ($("#customUserId").val() != null && $("#customUserId").val() != '') {				
			$("#form1").attr("action", "/three/custom/update");
			$("#form1").submit();	
			$(".input-text").val("");	
		} else {
			$("#form1").attr("action", "/three/custom/save");
			$("#form1").submit();
		}
	})
	//修改
	function toupd(id) {
		$.ajax({
			type : 'POST',
			dataType : "json",
			url : "/three/custom/toupdate",
			data : {
				customUserId : id
			},
			success : function(msg) {
				if (msg != null) {
					$("#form1").formEdit(msg);
					$("#modal-demo").modal("show");
				}
			}
		});
	}
	//查看详情
	$("#ckxq").click(function() {
		var rb = $("input[name=rb]");
		var id = "";
		for (var i = 0; i < rb.length; i++) {
			if (rb[i].checked == true) {
				id = rb[i].value;
				break;
			}
		}
		if (id.length > 0) {
			$('#modal').modal('show');
			$("#iframe").attr("src", "/three/custom/inite/" + id);
		} else {
			alert("请选择数据进行查看详情");
		}
	});
	$("#aaa").on("click", function() {

		var rb = $("input[name=rb]");
		var id = "";
		for (var i = 0; i < rb.length; i++) {
			if (rb[i].checked == true) {
				id = rb[i].value;
				break;
			}
		}
		if (id.length > 0) {
			$('#modal').modal('show');
			$("#iframe").attr("src", "/three/custom/inite/" + id);
		} else {
			alert("请选择数据进行查看详情");
		}
	})
	$("#bbb").on("click", function() {
		$("#iframe").attr("src", "/three/bus/list");
	});
    $("#ccc").on("click",function(){
    	var rb = $("input[name=rb]");
		var id = "";
		for (var i = 0; i < rb.length; i++) {
			if (rb[i].checked == true) {
				id = rb[i].value;
				break;
			}
		}
		if (id.length > 0) {
			$('#modal').modal('show');
			$("#iframe").attr("src", "/three/custom/inite/" + id);
		} else {
			alert("请选择数据进行查看详情");
		}		
    })
</script>
</html>